<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-form :model="formData" ref="formDataRef" :rules="rules" label-width="100px">
					<el-row>
						<el-col :span="12">
							<el-form-item label="开票编号" prop="SystemInvoiceNumer">
								<el-input v-model="formData.SystemInvoiceNumer" disabled placeholder="系统自动生成无需添加"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="开票时间:" prop="SystemInvoiceTime">
								<el-date-picker type="date"  v-model="formData.SystemInvoiceTime" value-format="yyyy-MM-dd" style="width: 100%;" placeholder="请选择开票时间"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="开票项目:" prop="SystemInvoiceProjectId">
								<el-select v-model="formData.SystemInvoiceProjectId" style="width: 100%;" placeholder="请选择项目" filterable @change="projectChange">
									<el-option v-for="item in ProjectList" :value="item.Id"  v-show="!item.Delete"
										:label="item.ProjectName"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="开票甲方:" prop="PartyA">
								<el-select v-model="formData.PartyA" placeholder="请选择开票甲方" style="width: 100%;" clearable filterable>
									<el-option v-for="item in SupplierList" :value="item.Id"  v-show="!item.Delete"
										:label="item.Name"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="开票方:" prop="SystemCompanyId">
								<el-select v-model="formData.SystemCompanyId"  placeholder="请选择开票方" style="width: 100%;" clearable filterable>
									<el-option v-for="item in CompanyList" :value="item.Id"
										:label="item.CompanyName"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="开票金额:" prop="SystemInvoiceAmount">
								<el-input type="number"  v-model="formData.SystemInvoiceAmount"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>	
						<el-col :span="12">
							<el-form-item label="收款金额" prop="SystemInvoiceIn">
								<el-input type="number" v-model="formData.SystemInvoiceIn"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="收款时间:" prop="InvoiceOutTime">
								<el-date-picker type="date" v-model="formData.InvoiceOutTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>					
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="备注" prop="Remarks">
								<el-input type="textarea" v-model="formData.Remarks"></el-input>
							</el-form-item>
						</el-col>	
					</el-row>
					<el-form-item align="right">
						<el-button type="primary" @click="insertHandler">添加</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		props: {
			closeFun: {
				type: Function,
				required: true
			},
			ProjectList:{
				type: Array,
				required: true
			},
			CompanyList:{
				type: Array,
				required: true
			},
			SupplierList:{
				type: Array,
				required: true
			},
		},
		data() {
			return {
				formData: {
					SystemInvoiceNumer:'',
					SystemInvoiceTime:null,
					SystemInvoiceProjectId:'',  
					PartyA:'',
					SystemCompanyId:'',
					SystemInvoiceAmount:'',
					SystemInvoiceIn:'',
					InvoiceOutTime:'',
					Remarks:'',
				},
				rules: {
					SystemInvoiceTime: [{
						required: true,
						message: '请选择开票时间',
						trigger: 'change'
					}],
					SystemInvoiceProjectId: [{
						required: true,
						message: '请选择开票项目',
						trigger: 'change'
					}],
					PartyA: [{
						required: true,
						message: '请选择开票甲方',
						trigger: 'change'
					}],
					SystemCompanyId: [{
						required: true,
						message: '请选择开票方',
						trigger: 'change'
					}],
					SystemInvoiceAmount: [{
						required: true,
						message: '请输入开票金额',
						trigger: 'blur'
					}],
				},
				selectData: [],
				BankName: '',
				CompanyList:[],
				ProjectList:[],
			}
		},
		methods: {
			insertHandler() {
				this.$refs.formDataRef.validate(valid => {
					if (valid) {
						this.$http.post('/api/SystemInvoice/Insert/insert', { 
							...this.formData,
							SystemInvoiceAmount: parseFloat(Number(this.formData.SystemInvoiceAmount).toFixed(2)), 
							SystemInvoiceIn: this.formData.SystemInvoiceIn!=''?parseFloat(Number(this.formData.SystemInvoiceIn).toFixed(2)):0, 
							InvoiceOutTime: this.formData.InvoiceOutTime!=''?this.formData.InvoiceOutTime:null, 
						}).then(res => {
							const {
								StatusCode,
								Data,
								Message
							} = res.data || 0
							if (StatusCode == 200) {
								this.$message.success('添加成功')
								this.resetFieldsEvent()
								this.$parent.$parent.dialogAddForm.show = false
								this.closeFun()
							} else {
								this.$message.warning(Message)
							}
						})
					}
				})
			},
			resetFieldsEvent() {
				this.$refs.formDataRef.resetFields()
				this.BankName = ''
			},
			getBankinfo() {
				this.$http.post('/api/Bankinfo/GetList/query', {
					key: '',
					PageNumber: 1,
					PageSize: 200,
				}).then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.selectData = Data.Data
					else this.selectData = []
				})
			},
			BankIdChangeEvent(row) {
				this.BankName = ''
				const bank = this.selectData.find(s => s.Id == row)
				this.BankName += bank.BankName
			},
			//项目切换
			projectChange(value){
				let result = this.ProjectList.find(x=>x.Id == value)
				if(result != undefined) this.formData.PartyA = result.PartyA
				else this.formData.PartyA = ''
			}
		}
	}
</script>

<style>
</style>